<template>
    <div class="comment-item-container">
        <van-cell
            :title="commentItem.content"
            class="comment-item"
        >
            <div
                slot="icon"
                class="commenter-img"
            >
                <van-image
                    fit="cover"
                    round
                    :src="commentItem.aut_photo"
                />
            </div>
            <div
                slot="title"
                class="commenter-info"
            >
                <span>{{ commentItem.aut_name }}</span>
                <van-icon
                    v-if="showLike"
                    :name="commentItem.is_liking ? 'good-job' : 'good-job-o'"
                    :color="commentItem.is_liking ? 'hotpink' : '#777'"
                    @click="onLike(commentItem.is_liking, commentItem.com_id)"
                />
            </div>
            <div
                slot="label"
                class="comment-info"
            >
                <p>{{ commentItem.content }}</p>
                <div class="comment-bottom-box">
                    <span>{{ commentItem.pubdate | formatTime }}</span>
                    <span class="like-count">{{ commentItem.like_count }}点赞</span>
                    <p @click="$emit('reply-click', commentItem)">{{ commentItem.reply_count }}回复</p>
                </div>
            </div>
        </van-cell>
    </div>
</template>

<script>
import * as Api from 'api/common';

export default {
    name: 'comment_item',
    components: {
    },
    props: {
        commentItem: {
            type: Object,
            required: true
        },
        index: {
            type: [Number, String],
            required: true
        },
        showLike: {
            type: Boolean,
            default: true
        }
    },
    // 监控data中的数据变化
    watch: {},
    // 定义属性
    data () {
        return {
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 方法集合
    methods: {
        async onLike (isLiking, id) {
            this.$toast.loading({
                duration: 0,
                message: '操作中...',
                forbidClick: true
            });
            const data = {
                target: id
            };
            try {
                if (isLiking) await Api.reqDev(`/v1_0/comment/likings/${id}`, 'delete');
                else await Api.reqDev('/v1_0/comment/likings', 'post', { data });
                this.$emit('onLike', this.index);
                this.$toast.clear();
            } catch (err) {
                console.log(err);
                this.$toast.clear();
                this.$toast.fail('操作失败');
            }
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
.comment-item-container {
    .commenter-img .van-image {
        width: 35px;
        height: 35px;
    }
    .van-cell__title {
        padding: 0 10px;
    }
    .commenter-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 24px;
        font-size: 16px;
        span {
            color: rgb(40, 74, 148);
            font-weight: bold;
        }
        .van-icon {
            font-size: 24px;
        }
    }
    .comment-info {
        p {
            font-size: 20px;
            margin: 10px 0;
            color: #000;
        }
        .comment-bottom-box {
            display: flex;
            align-items: center;
            // font-size: 14px;
            .like-count {
                margin-left: 20px;
            }
            span{
                font-size: 14px;
            }
            p {
                font-size: 14px;
                border: 1px solid #ccc;
                padding: 5px 9px;
                border-radius: 15px;
                margin: 0 0 0 20px;
            }
        }
    }
}
</style>
